<template>
    <div class="w-100 h-100 shjpj">
    <containTemplete
     :title="''" 
     :secondTitles="['','',' ']"
     :slotWidth="[33, 33, 33]"
     >
    
        <template #left>
            <div class="w-100 h-100">
                <szy
                  :type="left_type_value"
                  :year="left_year_value"
                  :month="left_month_value"
                
                />
            </div>
        </template>
        <template #middle>
            <div class="w-100 h-100">
                <saq 
                  :type="middle_type_value"
                  :site="middle_site_value"
                  :year="middle_year_value"
                  :month="middle_month_value"
                />

            </div>
        </template>
        <template #right>
            <div class="w-100 h-100">
                <sszwfgl 
                  :hb="right_value"
                />

            </div>
        </template>

      <template #left_control>
        <div style="text-align:right;width: 100%; position: absolute; right: 0; top: 0;">
          <div >
            <proSelect
                :optionsData="useOptions().waterWatchType"
                :defaultSelectValue="0"
                v-model:select-value="left_type_value"
                :width="200"
            >
            </proSelect>
          </div>
          <div>
            <proSelect
                :optionsData="useOptions().year()"
                :defaultSelectValue="new Date().getFullYear()-1"
                v-model:select-value="left_year_value"
                :width="100"
            >
            </proSelect>
            <proSelect
                :optionsData="
                useOptions().month.map((label, index) => ({
                  label,
                  value: index + 1,
                }))
              "
                :defaultSelectValue="1"
                v-model:select-value="left_month_value"
                :width="100"
            >
            </proSelect>
          </div>
        </div>
      </template>
        <template #middle_control>
          <div style="text-align:right;width: 100%; position: absolute; right: 0; top: 0;">
            <div >
              <proSelect
                  :optionsData="useOptions().waterWatchType"
                  :defaultSelectValue="0"
                  v-model:select-value="middle_type_value"
                  :width="200"
              >
              </proSelect>

              <proSelect
                  :optionsData="useOptions().waterSite"
                  :defaultSelectValue="0"
                  v-model:select-value="middle_site_value"
                  :width="200"
              >
              </proSelect>
            </div>
            <div>
              <proSelect
                  :optionsData="useOptions().year()"
                  :defaultSelectValue="new Date().getFullYear()-1"
                  v-model:select-value="middle_year_value"
                  :width="100"
              >
              </proSelect>
              <proSelect
                  :optionsData="
                useOptions().month.map((label, index) => ({
                  label,
                  value: index + 1,
                }))
              "
                  :defaultSelectValue="1"
                  v-model:select-value="middle_month_value"
                  :width="100"
              >
              </proSelect>
            </div>
          </div>
        </template>
        <template #right_control>
          <div style="text-align:right;width: 100%; position: absolute; right: 0; top: 0;">
          <proSelect
              :optionsData="useOptions().hbData"
              :defaultSelectValue="0"
              v-model:select-value="right_value"
              :width="100"
          >
          </proSelect>
          </div>
        </template>
    </containTemplete>
    </div>
</template>

<script setup lang='ts'>
import containTemplete from '@/components/project/containTemplete.vue';
import shjpjjbxx from './shjpjjbxx.vue';
import gqynszpjtj from './gqynszpjtj.vue';
import shjzlyjxxlb from './shjzlyjxxlb.vue';
import szy from './szy.vue'
import saq from './saq.vue'
import sszwfgl from './sszwfgl.vue'
import { useOptions } from "@/hook/useOptions";

const left_type_value = ref(0);
const left_year_value = ref(2024);
const left_month_value = ref(1);


const middle_type_value = ref(0)
const middle_site_value = ref(0)
const middle_year_value = ref(2024)
const middle_month_value = ref(1);

const right_value = ref(0)

</script>

<style scoped lang="less" >
.shjpj{
    /deep/ .bar {
        display: none;
    }
}
</style>